<template lang='pug'>
div.step-wrap
  el-tooltip(
    v-for='(item, index) in stepList'
    :key="index"
    :disabled="!item.content"
    effect="dark"
    placement="bottom")
    slot(slot="content" name="content")
      .content-lists(v-if="item.isGroup && item.isGroup.length > 0")
        p(
          v-for="(cell, index) in item.isGroup"
          :key="index") {{index + 1}}: {{cell.content}}
      p(v-else) {{item.content}}
    .step-item(
      :class='index | stepClass(step)')
      //- .step-item-label
      template(v-if='item.icon')
        span
          i(:class='["iconfont", "icon-" + item.icon]')
      span.step-item-title {{item.label}}
        //- small {{item.subtitle}}
  //- .slide.left() <
  //- .slide.right() >
</template>

<script>
/**
 * @name stepItem 步骤条
 * @author linmn <linmn@gddxit.com>
 */
// import { isArray } from 'lodash'
export default {
  name: 'StepItem',
  props: {
    stepList: {
      type: Array,
      default: () => {
        return [
          {
            icon: 'sample icon1',
            name: 'first',
            label: 'Sample title 1',
            subtitle: 'Subtitle sample'
          }, {
            icon: 'sample icon2',
            name: 'first',
            label: 'Sample title 1',
            subtitle: 'Subtitle sample'
          }
        ]
      }
    }, // step列表
    step: {
      type: Number,
      default: 0
    } // 当前活动的step
  },
  filters: {
    stepClass (item, cur) {
      return cur - item === 0 ? 'current' : (cur - item > 0 ? 'done' : 'undone')
    }
  }
}
</script>

<style lang='sass' scoped>
.slide
  width: 20px
  text-align: center
  cursor: pointer
  user-select:none
  background: rgba(0,0,0,0.15)
  position: absolute
  top: 8px
  height: 32px
  line-height: 32px
.left
  left: 0
.right
  right: 0
.step-wrap
  width: 100%
  flex-wrap: nowrap
  display: flex
  flex-item: center
  text-align: center
  justify-content: center
  padding: 8px 0
  background: #fff
  &>.step-item
    flex-grow: 1
    min-width: 130px
    display: inline-block
    position: relative
    padding: 4px 1.2rem
    padding-left: 2rem
    text-align: center
    line-height: 24px
    // height: 34px
    // overflow: hidden
    // font-size: 1.1rem
  // 当前
  .current
    background: #47b1f6
    color: #fff
    width: 130px
    &::after
      border-left-color: #47b1f6 !important
  // 已完成
  .done
    background: #83cffe
    color: #fff
    &::after
      border-left-color: #83cffe !important
  // 未完成
  .undone
    background: #eee
    color: #838e9d
    &::after
      border-left-color: #eee !important
  // 箭头
  &>.step-item:not(:last-child)
    &::after, &::before
      content: ''
      border: 16px solid transparent
      border-left: 16px solid #47b1f6
      width: 0
      height: 0px
      position: absolute
      top: 50%
      right: 2px
      z-index: 1
      transform: translate(33.8px, -17px)
    &::before
      border-left-color: #fff
      right: 0px
  // large size step top item
  &>.step-item_large:not(:last-child)
    &::after, &::before
      content: ''
      border: 30px solid transparent
      border-left: 15px solid #47b1f6
      width: 0
      height: 100%
      position: absolute
      top: 0
      right: -11px
      z-index: 9
      transform: translateX(34px)
    &::before
      border-left-color: #fff
      right: -13px
</style>
